import React, { memo,Suspense } from 'react';
import {useRoutes } from "react-router"
import {Provider}  from "react-redux"
import routes from './router';
import store from "./store"

import XJDAppHeader from '@/components/app-header';
import XJDAppFooter from '@/components/app-footer';

import XJDAppPlayerBar from "./pages/player/app-player-bar"

export default memo(function App() {
  let element=useRoutes(routes)
  return (
    <div >
      <Provider store={store}>
      <XJDAppHeader/>
      <Suspense fallback={<div>page loading</div>}>
      {element}
      </Suspense>
      <XJDAppPlayerBar/>
      <XJDAppFooter/>
      </Provider>
    </div>
  )
})

